@import models.Tables.GenomeRow
@(row: GenomeRow)
@config.main(row.geneid) {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>
            table {
                white-space: normal !important;
            }

            #goTable th:first-child{
                width: 20%!important;
            }

            .box-plot {
                width: 100%;
            }

            .seq {
                height: 150px;
                overflow: auto;
                padding-right: 25px;
                word-break: break-all;
            }

            .fa-search:hover {
                cursor: pointer;
            }

            .flank-gene {
                color: red;
            }
    </style>
    <div class="body-box">
        <div class="page-box">

            @config.subTitle(row.geneid,"Genome","/hordeum/browse/genomePage")

            <div class="main-body">

                @components.scrollComponents("Basic") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th width="20%">Gene ID</th><td>@row.geneid</td></tr>
                            <tr><th>Chromsome</th><td>@row.chr</td></tr>
                            <tr><th>Start Position</th><td>@row.start</td></tr>
                            <tr><th>End Position</th><td>@row.end</td></tr>
                            <tr><th>Strand</th><td>@row.strand</td></tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("Go") {
                    <table class="table table-hover table-bordered" id="goTable">
                        <thead>
                            <tr>
                                <th data-field="name" data-formatter="GetGo">GO term accession</th>
                                <th data-field="des">GO term definition</th>
                            </tr>
                        </thead>
                    </table>
                }

                @components.scrollComponents("Protein domains and families") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th width="20%">Pfam ID</th><td>@for(pfam <- row.pfam.split(";")){
                                <a href="http://pfam.xfam.org/family/@pfam" target="_blank">@pfam</a> <br/>
                            }</td></tr>
                            <tr><th>PANTHER ID</th><td>@for(pather <- row.pather.split(";")){
                                <a href="http://www.pantherdb.org/panther/family.do?clsAccession=@pather" target="_blank">@pather</a> <br/>
                            }</td></tr>
                            <tr><th>Interpro ID</th><td>@for(inter <- row.interpro.split(";")){
                                <a href="http://www.pantherdb.org/panther/family.do?clsAccession=@inter.split(":").head" target="_blank">@inter.split(":").head </a> : @inter.split(":").last <br/>
                            }</td></tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("Genome Browser") {
                    <iframe style="border: 1px solid rgb(80, 80, 80);" id="iframe" height="400" width="100%" name="jbrowse_iframe">
                    </iframe>
                }
                @components.scrollComponents("Seqs") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th width="20%">
                                CDS<button class="btn" onclick="downloadSeq('@row.geneid', 'cds')"><i class="fa fa-download"></i></button></th><td class="monospace"><div class="seq">
                                >@row.geneid<br/> <div id="cds"></div></div></td></tr>
                            <tr><th>
                                Protein<button class="btn" onclick="downloadSeq('@row.geneid', 'pep')"><i class="fa fa-download"></i></button></th><td class="monospace"><div class="seq">
                                >@row.geneid<br/> <div id="pep"></div></div></td></tr>

                        </tbody>
                    </table>
                }

            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("FileSaver.js-master/FileSaver.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/genomeTable.js")" type="text/javascript"></script>

    <script>

            $(function () {
                let host = window.location.hostname;
                $("#iframe").attr("src", "http://" + host + ":8080/?data=my_data/Hordeum/@row.species/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation,Bed&tracklist=0&nav=1&overview=0")


                $.post("/hordeum/browse/getSeqs?geneid=@{row.geneid}&&go=@{row.go}&&species=@{row.species}", (data) => {
                    $("#goTable").bootstrapTable({data:data.go})
                    if (data.valid === "false") {
                        console.log( data.msg)
                    } else {
                        $("#cds").text(data.cds)
                        $("#pep").text(data.pep)
                    }
                })


            })

            function downloadSeq(name, types) {
                let fileName = name + "_" + types + ".fa";
                let content = ">" + name + "\n" + $("#" + types).text().trim();
                let blob = new Blob([content], {
                    type: "text/plain;charset=utf-8"
                });
                saveAs(blob, fileName)
            }



    </script>

}